import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline, LeftOutline } from 'antd-mobile-icons'
import { userLogin } from '@api'
import './index.scss'

export default class Login extends Component {
  formRef = React.createRef()
  state = {
    isshow: false
  }
  render() {
    return (
      <div className='sc_login'>
        <div className="item-head">
          <div className="goback" onClick={this.goBack}><LeftOutline /></div>
          <div className="title">登录</div>
          <div className="gopage" onClick={this.goRegister}>注册</div>
        </div>
        <Form
          layout='horizontal'
          ref={this.formRef}
          footer={
            <Button block type='submit' color='danger' onClick={this.userLogin}>
              登录
            </Button>
          }
        >
          <div className='username'>
            <Form.Item name='username' rules={[{ required: true, message: '姓名不能为空' }, { pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/, message: "账号为1至32位汉字、字母、数字、下划线或中英文括号" }]} >
              <Input placeholder='请输入用户名' onChange={console.log} />
            </Form.Item>
          </div>
          <div className='password'>
            <Form.Item name='pwd' rules={[{ required: true, message: '密码不能为空' }]} >
              <Input placeholder='请输入密码' onChange={console.log} type={this.state.isshow ? 'text' : 'password'} />
            </Form.Item>
            <div className='showpwd' onClick={this.showPwd}>
              {
                this.state.isshow ? <EyeOutline /> : <EyeInvisibleOutline />
              }
            </div>
          </div>

        </Form>
      </div>
    )
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 登录
  userLogin = () => {
    console.log(this.formRef.current.getFieldValue());
    this.formRef.current.validateFields()
      .then((res) => {
        console.log(res, 'dsfsdfds');
        userLogin({
          deviceId: '设备ID：6666',
          deviceName: '设备名称：66666',
          ...this.formRef.current.getFieldValue()
        }).then((res) => {
          console.log(res);
          if (res.data.code === 0) {
            Toast.show({
              icon: 'success',
              content: '登录成功',
              duration: 1000,
              afterClose: () => {
                localStorage.setItem('token', res.data.data.token)
                this.props.history.push('/user')
              }
            })
          } else {
            Toast.show({
              icon: 'fail',
              content: res.data.msg,
              duration: 1000
            })
          }
        })
      })
      .catch((rep) => {
        console.log(rep);
        if (rep.errorFields) {
          Toast.show({
            icon: 'fail',
            content: '请修改错误',
            duration: 1000
          })
          return false
        }
      })
  }
  // 是否显示密码
  showPwd = () => {
    this.setState({
      isshow: !this.state.isshow
    })
  }
  // 后退
  goBack = () => {
    this.props.history.go(-1)
  }
  // 去注册
  goRegister = () => {
    this.props.history.push('/Register')
  }
}